<template>
  <div class="main">
    <a-layout class="layout">
      <a-layout-header class="header">
        <div>
          <span></span>
          入职通知内容
        </div>
        <a-button @click="handleClick" type="primary">
          <template #icon>
            <icon-edit />
          </template>
          <template #default>编辑</template></a-button
        >
      </a-layout-header>
      <a-layout-content class="main">
        <div class="smart-tool__btn">
          <a-space>
            <a-button
              v-for="(item, index) in list"
              :key="index"
              @click="inputLabel(item, index)"
              >#{{ item.name }}#</a-button
            >
          </a-space>
        </div>
        <RichTextNew v-model:content="content" ref="rich"></RichTextNew>
      </a-layout-content>
    </a-layout>
    <a-layout class="layout">
      <a-layout-header class="header">
        <div>
          <span></span>
          入职材料
        </div>
        <a-button @click="modalShow = true" type="primary">新增</a-button>
      </a-layout-header>
      <a-layout-content class="main">
        <a-table :data="table" stripe>
          <template #columns>
            <a-table-column align="center" :width="80">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              :width="200"
              dataIndex="stuffName"
              align="center"
              title="材料名称"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="stuffContent"
              align="center"
              title="提交要求"
            ></a-table-column>
            <a-table-column
              title="操作"
              align="center"
              :width="120"
              fixed="right"
            >
              <template #cell="{ record }">
                <a-tooltip content="编辑">
                  <icon-font
                    @click="edit(record)"
                    type="icon-edit"
                    :size="26"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer'
                    }"
                  />
                </a-tooltip>
                <a-tooltip content="删除" position="left">
                  <a-popconfirm
                    content="是否确认删除该条数据?"
                    @ok="del(record.id)"
                  >
                    <icon-font
                      type="icon-delete"
                      :size="26"
                      :style="{
                        cursor: 'pointer',
                        marginRight: '10px'
                      }"
                    />
                  </a-popconfirm>
                </a-tooltip>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>
    <a-drawer
      :width="500"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title> 基础信息 </template>
      <a-table
        :data="labelList"
        @change="handleChange"
        :draggable="{ type: 'handle', width: 40 }"
        stripe
      >
        <template #columns>
          <a-table-column align="center" :width="200">
            <template #title> 字段名称 </template>
            <template #cell="{ record }">
              {{ record.name }}
            </template>
          </a-table-column>
          <a-table-column align="center" :width="80">
            <template #title> 是否显示 </template>
            <template #cell="{ record }">
              <a-checkbox v-model="record.isShow"></a-checkbox>
            </template>
          </a-table-column>
          <a-table-column align="center" :width="80">
            <template #title> 是否必填 </template>
            <template #cell="{ record }">
              <a-checkbox v-model="record.isRequired"></a-checkbox>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-drawer>
    <a-modal v-model:visible="modalShow" @ok="fileOk" @cancel="fileCancel">
      <template #title> 新增材料 </template>
      <a-form :model="form">
        <a-form-item
          field="stuffName"
          label="材料名称："
          :rules="stuffNameRules"
        >
          <a-input v-model="form.stuffName" placeholder="请输入" />
        </a-form-item>
        <a-form-item field="stuffContent" label="提交要求：">
          <a-textarea
            v-model="form.stuffContent"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import {
  DelOnboardingInformTemplateDetail,
  AddOnboardingInformTemplateDetail
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { materials, file, stuff } from '../type';
import clonedeep from 'lodash.clonedeep';
const props = withDefaults(
  // 参数说明
  defineProps<{
    materialData?: materials[];
    id: number;
  }>(),
  {
    materialData: () => {
      return [];
    }
  }
);
const table = ref();
const visible = ref(false);
const modalShow = ref(false);
const handleClick = () => {
  visible.value = true;
};
const fileCancel = () => {
  for (let key in form) {
    form[key] = null;
  }
  modalShow.value = false;
};
const fileOk = async () => {
  const newArr = clonedeep(props.materialData) || [];
  if (form.id) {
    let editNewArr = newArr.filter((ele: any) => ele.id === form.id);
    editNewArr[0].stuffName = form.stuffName;
    editNewArr[0].stuffContent = form.stuffContent;
  } else {
    form.hid = props.id;
    const res = await AddOnboardingInformTemplateDetail(form);
    console.log(res.id);
    form.id = res.id;
    newArr.push(clonedeep(form));
    console.log(res);
  }
  emit('update:materialData', newArr);
  for (let key in form) {
    form[key] = null;
  }
  modalShow.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const handleOk = () => {
  visible.value = false;
};
const form = reactive<materials>({});
const stuffNameRules = {
  required: true,
  message: '请输入材料名称'
};

const handleChange = (_data: any) => {
  console.log(_data);
  labelList.value = _data;
};
const list = computed(() => labelList.value.filter((ele) => ele.isShow));
const labelList = ref<
  { code: number; name: string; isShow: boolean; isRequired: boolean }[]
>([
  { code: 1, name: '姓名', isShow: true, isRequired: true },
  { code: 2, name: '组织', isShow: true, isRequired: true },
  { code: 3, name: '电话号码', isShow: true, isRequired: true },
  { code: 4, name: '身份证', isShow: true, isRequired: true },
  { code: 5, name: '邮箱', isShow: true, isRequired: true },
  { code: 6, name: '岗位', isShow: true, isRequired: true },
  { code: 7, name: '性别', isShow: true, isRequired: true }
]);

const verifyArr: any = reactive([]);
const rich = ref();
const inputLabel = (item: any, ind: number) => {
  if (verifyArr.indexOf(list.value[ind]) === -1) {
    verifyArr.push(list.value[ind]);
  }
  const tag = `&nbsp;<span style="text-decoration: underline; color: #3598db; font-size: 12pt;">#${item.name}#</span>&nbsp;`;
  nextTick(() => {
    rich.value.insertContent(tag);
  });
};
const content = ref<string>();
const del = async (id: number) => {
  const newArr = clonedeep(props.materialData);
  let index = 0;
  newArr.some((ele: any, ind: number) => {
    if (ele.id === id) index = ind;
  });
  newArr.splice(index, 1);
  await DelOnboardingInformTemplateDetail({ id });
  emit('update:materialData', newArr);
  console.log(form);
};
const edit = (data: any) => {
  form.id = data.id;
  form.stuffName = data.stuffName;
  form.stuffContent = data.stuffContent;
  modalShow.value = true;
};
watch(
  () => props.materialData,
  () => {
    table.value = props.materialData.slice(1);
    content.value = props.materialData[0]?.content || '';
    emit('update:content', props.materialData[0]?.content || '');
    console.log('props.materialData', props.materialData);
  }
);
watch(
  () => content.value,
  () => {
    const newArr = clonedeep(props.materialData);
    if (newArr[0]) {
      newArr[0].content = content.value;
    }
    emit('update:materialData', newArr);
  }
);
const emit = defineEmits(['update:content', 'update:materialData']);
</script>
<style lang="less" scoped>
.layout {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #f3f8fe;
    border-radius: 4px;
    margin-bottom: 20px;
    div {
      display: flex;
      align-items: center;
      span {
        margin: 0 20px;
        display: inline-block;
        width: 5px;
        height: 30px;
        background-color: #165dff;
      }
    }
  }
  .main {
    padding: 0 40px 20px 40px;
  }
  .arco-upload-wrapper {
    flex: 0;
  }
}
</style>
